<template>
	<view class="right-box">
		<uni-popup ref="popup" type="left" background-color="#99C258">
			<view class="popup-content">
				<image class="top-img" src="https://nownc178.cq4oss.ctyunxs.cn/left/top.png" @click="mineClick"></image>
				<view class="left">
					<image v-for="(item,index) in typeList" :src="item.iconUrl" :key="item.id" @click="detailClick(item)">
				</view>
			</view>
		</uni-popup>
		<view class="right-menu">
			<image src="https://nownc178.cq4oss.ctyunxs.cn/left/fold.png" @click="openPopup" />
			<image src="https://nownc178.cq4oss.ctyunxs.cn/left/mine.png" @click="mineClick" />
			<image src="https://nownc178.cq4oss.ctyunxs.cn/left/search.png" @click="searchClick" />
		</view>
	</view>
</template>

<script>
import { getInterestList } from '@/api/index.js';
export default {
	data() {
		return {
			typeList: []
		}
	},
	mounted() {
		this.getListData();
	},
	methods: {
		getListData() {
			let that = this;
			const data = {
				current: 0,
				size: 100
			};
			getInterestList(data).then((respond) => {
				const dataArr = respond.data;
				if (respond.code === 200 && dataArr) {
					that.typeList = dataArr;
				} 
				console.log('data:',respond.data);
			});
		},
		openPopup() {
			this.$refs.popup.open();
		},
		mineClick() {
			uni.navigateTo({
				url: '/pages/mine/index'
			});
		},
		searchClick() {
			uni.navigateTo({
				url: '/pages/search/index'
			});
		},
		detailClick(item) {
			console.log(item);
			uni.navigateTo({
				url: `/pages/interest/index?id=` + item.id
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.popup-content {
	width: 450rpx;
	height: 100%;
}
.top-img {
	width: 300rpx;
	height: 78rpx;
	display: block;
	margin: 60rpx auto;
}
.left {
	background: url('https://nownc178.cq4oss.ctyunxs.cn/left/bg.png') no-repeat;
	background-size: 100%;
	height: 75%;
	margin: 34rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	image {
		width: 300rpx;
		height: 100rpx;
	}
}
.right-menu {
	height: 200rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: fixed;
	top: 30%;
	right: 40rpx;
	image {
		width: 50rpx;
		height: 50rpx;
	}
}
</style>
